<template>
    <div class="search">
        <div class="search_nav" ref="search">
            <div class="city_search">
                <div class="input" >
                    <span><i class="el-icon-search search_icon"></i></span>
                    <input type="text" placeholder="请输入城市或拼音" v-model="msg" @input="searchInput">
                    <span @click="clearInput"><i class="el-icon-error error"></i></span>
                </div>
                <div class="cancel" @click="cancel">取消</div>
            </div>  
        </div>
        <div class="search_show" :style="{paddingTop: offsetHeight+'px'}" v-if="isShow">
            <div class="city_item">{{cityList.index}}</div>
            <div class="city_item" v-for="item in cityList.list" :key="item.id" @tap="checkCity(item)">{{item.nm}}</div>
        </div>
        <div class="search_none" v-if="!isShow && isInput">无结果</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            msg:'',
            offsetHeight:null,
            timer: null,
            cityList:[],
            isShow:false,
            isInput:false
        }
    },
    mounted() {    
        this.offsetHeight = this.$refs.search.offsetHeight

    },
    methods:{
        searchInput() {
         
         clearTimeout(this.timer)
         if(this.msg.trim()) {
             this.timer = setTimeout(this.shake,500)
         }
         else {
             this.clearInput()
         }

        },
        clearInput() {
            this.msg = '';
            this.isShow = false;
            this.isInput = false;
            this.cityList=[]
        },
        cancel() {
            this.$router.replace('/cityList')
        },
        checkCity(item){
             this.$store.commit('getCurrentCity',item);
             this.$router.go(-2);
        },
        shake () {
            this.axios.get('/api/cityList').then((res) => {
                if (res.data.msg === 'ok') {
                    let list = res.data.data.cities
                    let cityList = this.filterCity(list)
                    if (cityList.length > 0){
                        this.isShow =  true
                        this.cityList = {index:cityList[0].py.substr(0,1).toUpperCase(),list:cityList};
                    }
                    else {
                        this.isInput = true
                        this.isShow =  false
                    }
                }
            })
        },

        filterCity(list) {
            let cityList = []

            list.forEach(item=>{
                var exg =/[a-zA-Z]/;
                var msg = this.msg.trim();
                if( exg.test(msg) && msg.length === 1) {
                    
                    if( item.py.substr(0,1).toUpperCase() === msg.toUpperCase() ){
                        // console.log(item)
                         cityList.push(item)
                    }
                }     
                else if(msg.substr(0,msg.length) === item.nm.substr(0,msg.length)) {
                        cityList.push(item)
                }
            })
            return cityList
        },
    }
}
</script>
<style scoped>
    .search{width: 100%;height: 100%;overflow: auto;background-color: #f4f4f4;}
    .search_nav{position: fixed ; top: 0;left: 0;right: 0;}

    .city_search{width: 100%;display: flex;flex-direction: row;justify-content: center;align-items: center;padding: 10px 15px;background-color:#e54847;color: #fff;}
    .search_icon{color: #999;margin: 0 5px}
    .input{flex-grow: 1;display: flex;flex-direction: row;align-items: center;width: 100%;border-radius: 20px;background-color: #fff;padding: 2px;margin-right: 5px}
    .input input{height: 100%;flex-grow: 1;margin-right:10px;outline: none;border: none;}
    .error{color: #999;margin-right: 5px}
    .cancel{flex-shrink: 0;font-size: 14px;}


    .search_show{height: 100%;background-color: #ffffff;}
    .city_item:first-child{color: #999;padding: 10px 20px;}
    .city_item{width: 100%;padding:15px;border-top: 1px solid #f2f2f2;background-color: #fff;font-size: 14px;color:#333; }


    .search_none{font-size: 14px;color: #787878;text-align: center;padding-top: 50%}
   

    
</style>